import React, {useRef, useState} from "react";
import style from "./index.module.scss";
import classNames from "classnames";
import Scanner from "./components/Scanner/index";
import {Manual} from "@/page/Toy/Home/components/Manual";
import useGetApiData from "@/hooks/useGetApiData";
import {createItem} from "@/api/user/toyItem";
// 模拟图片路径
export default function ToyHome() {
  const [activeTab, setActiveTab] = useState("learn");
  const [result, setResult] = useState("二维码地址");
  const [show, setShow] = useState(false);
  const {request: createItemRequest} = useGetApiData(createItem, {});
  const scannerRef: any = useRef(null);
  const manualRef: any = useRef(null);

  async function onScanSuccess(result: string) {
    setResult(result);
    setShow(false);
    await createItemRequest({toyId: result});
    manualRef.current.getData();
  }

  function handleInitScanner(e: any) {
    setShow(true);
  }

  function handleDestroyScanner() {
    setShow(false);
  }

  return (
    <div className={classNames(style.toyHome)}>
      {/*{result}*/}
      {show && <Scanner ref={scannerRef} width={500} onScanSuccess={onScanSuccess} onClose={handleDestroyScanner}></Scanner>}
      {/* <header className="header">*/}
      {/*  <h1 className="title">玩具说明书</h1>*/}
      {/*<div className="header-actions">*/}
      {/*  <div className="search-icon">*/}
      {/*    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
      {/*      <path*/}
      {/*        d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"*/}
      {/*        stroke="#555"*/}
      {/*        strokeWidth="2"*/}
      {/*        strokeLinecap="round"*/}
      {/*        strokeLinejoin="round"*/}
      {/*      />*/}
      {/*      <path d="M21 21L16.65 16.65" stroke="#555" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />*/}
      {/*    </svg>*/}
      {/*  </div>*/}
      {/*  <div className="profile-icon">*/}
      {/*    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
      {/*      <path*/}
      {/*        d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"*/}
      {/*        stroke="#555"*/}
      {/*        strokeWidth="2"*/}
      {/*        strokeLinecap="round"*/}
      {/*        strokeLinejoin="round"*/}
      {/*      />*/}
      {/*      <path*/}
      {/*        d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"*/}
      {/*        stroke="#555"*/}
      {/*        strokeWidth="2"*/}
      {/*        strokeLinecap="round"*/}
      {/*        strokeLinejoin="round"*/}
      {/*      />*/}
      {/*    </svg>*/}
      {/*  </div>*/}
      {/*</div>*/}
      {/*</header>*/}

      <div className="content">
        <section className="hero-section" onClick={handleInitScanner}>
          <div className="scan-card">
            <div className="scan-info">
              <h2 className="scan-title">扫码查看说明视频</h2>
              <p className="scan-subtitle">产品内容全清晰</p>
            </div>
            <div className="camera-wrapper">
              <div className="camera-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M23 19C23 19.5304 22.7893 20.0391 22.4142 20.4142C22.0391 20.7893 21.5304 21 21 21H3C2.46957 21 1.96086 20.7893 1.58579 20.4142C1.21071 20.0391 1 19.5304 1 19V8C1 7.46957 1.21071 6.96086 1.58579 6.58579C1.96086 6.21071 2.46957 6 3 6H7L9 3H15L17 6H21C21.5304 6 22.0391 6.21071 22.4142 6.58579C22.7893 6.96086 23 7.46957 23 8V19Z"
                    stroke="#044747"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M12 17C14.2091 17 16 15.2091 16 13C16 10.7909 14.2091 9 12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17Z"
                    stroke="#044747"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
            </div>
          </div>
        </section>

        <section className="categories-section">
          <div className="category-row">
            <div className="category-item">
              <div className="category-icon" style={{backgroundColor: "#6ED9A0"}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M2 12H4.5L7.5 4L10.5 20L13.5 8L16.5 16L18 12H22"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              <span className="category-label">益智类</span>
            </div>
            <div className="category-item">
              <div className="category-icon" style={{backgroundColor: "#FF9F87"}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3 6H21M7 12H17M10 18H14" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <span className="category-label">拼装类</span>
            </div>
            <div className="category-item">
              <div className="category-icon" style={{backgroundColor: "#6EBDFF"}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M13 2L8 6H5C4.44772 6 4 6.44772 4 7V17C4 17.5523 4.44772 18 5 18H19C19.5523 18 20 17.5523 20 17V7C20 6.44772 19.5523 6 19 6H16L11 2"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path d="M12 11V14" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M12 22V19" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <span className="category-label">电动类</span>
            </div>
            <div className="category-item">
              <div className="category-icon" style={{backgroundColor: "#FFCC66"}}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4 6H20M4 12H20M4 18H20" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <span className="category-label">全部分类</span>
            </div>
          </div>
        </section>

        <section className="promo-section">
          <div className="promo-card">
            <div className="promo-tag">· 开学季 ·</div>
            <div className="promo-content">
              <h3 className="promo-title">
                <span className="highlight-yellow">儿童益智</span>
                <span className="highlight-orange">新品体验活动</span>
              </h3>
              <p className="promo-desc">新学期新玩具，培养专注力和创造力</p>
              <button className="promo-cta">
                点此领取福利
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{marginLeft: "4px"}}>
                  <path d="M5 12H19" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M12 5L19 12L12 19" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>
          </div>
        </section>
        <Manual ref={manualRef}></Manual>

        <section className="brands-section">
          <div className="section-header">
            <h3 className="section-title">品牌故事</h3>
            <span className="view-all">更多</span>
          </div>

          <div className="video-card">
            <div className="video-thumbnail">
              <div className="video-bg"></div>
              <div className="play-button">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path d="M10 8L16 12L10 16V8Z" fill="white" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            </div>
            <div className="video-info">
              <h4 className="video-title">智能玩具引领者</h4>
              <p className="video-duration">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{marginRight: "4px"}}>
                  <path
                    d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                    stroke="#6c757d"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path d="M12 6V12L16 14" stroke="#6c757d" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                03:45
              </p>
            </div>
          </div>
        </section>
      </div>

      {/*<footer className="footer">*/}
      {/*  <div className={classNames("footer-tab", {active: activeTab === "manage"})} onClick={() => setActiveTab("manage")}>*/}
      {/*    <div className="tab-icon">*/}
      {/*      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
      {/*        <path*/}
      {/*          d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"*/}
      {/*          stroke="currentColor"*/}
      {/*          strokeWidth="2"*/}
      {/*          strokeLinecap="round"*/}
      {/*          strokeLinejoin="round"*/}
      {/*        />*/}
      {/*        <path d="M9 22V12H15V22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />*/}
      {/*      </svg>*/}
      {/*    </div>*/}
      {/*    <span className="tab-label">首页</span>*/}
      {/*  </div>*/}
      {/*  <div className={classNames("footer-tab", {active: activeTab === "learn"})} onClick={() => setActiveTab("learn")}>*/}
      {/*    <div className="tab-icon">*/}
      {/*      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
      {/*        <path*/}
      {/*          d="M2 3H8C9.06087 3 10.0783 3.42143 10.8284 4.17157C11.5786 4.92172 12 5.93913 12 7V21C12 20.2044 11.6839 19.4413 11.1213 18.8787C10.5587 18.3161 9.79565 18 9 18H2V3Z"*/}
      {/*          stroke="currentColor"*/}
      {/*          strokeWidth="2"*/}
      {/*          strokeLinecap="round"*/}
      {/*          strokeLinejoin="round"*/}
      {/*        />*/}
      {/*        <path*/}
      {/*          d="M22 3H16C14.9391 3 13.9217 3.42143 13.1716 4.17157C12.4214 4.92172 12 5.93913 12 7V21C12 20.2044 12.3161 19.4413 12.8787 18.8787C13.4413 18.3161 14.2044 18 15 18H22V3Z"*/}
      {/*          stroke="currentColor"*/}
      {/*          strokeWidth="2"*/}
      {/*          strokeLinecap="round"*/}
      {/*          strokeLinejoin="round"*/}
      {/*        />*/}
      {/*      </svg>*/}
      {/*    </div>*/}
      {/*    <span className="tab-label">学习</span>*/}
      {/*  </div>*/}
      {/*  <div className={classNames("footer-tab", {active: activeTab === "profile"})} onClick={() => setActiveTab("profile")}>*/}
      {/*    <div className="tab-icon">*/}
      {/*      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
      {/*        <path*/}
      {/*          d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"*/}
      {/*          stroke="currentColor"*/}
      {/*          strokeWidth="2"*/}
      {/*          strokeLinecap="round"*/}
      {/*          strokeLinejoin="round"*/}
      {/*        />*/}
      {/*        <path*/}
      {/*          d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"*/}
      {/*          stroke="currentColor"*/}
      {/*          strokeWidth="2"*/}
      {/*          strokeLinecap="round"*/}
      {/*          strokeLinejoin="round"*/}
      {/*        />*/}
      {/*      </svg>*/}
      {/*    </div>*/}
      {/*    <span className="tab-label">我的</span>*/}
      {/*  </div>*/}
      {/*</footer>*/}
    </div>
  );
}
